<template>
	<div>
		<div class="nav_box">
			<div class="nav_inner">
				<router-link to="/layout/wode">
					<img src="../../assets/smallIcon/return.png"  alt="">
				</router-link>
				<Search />
			</div>
		</div>
		<div class="headline">
			<div class="praise">
				<router-link to="/layout/praise_main">赞</router-link>
			</div>
			<div class="title">文章</div>
			<div class="video">
				 视频
			     <div class="line"></div>
		    </div>
		</div>
		<div class="water">
			<div class="picture">
				<img src="../../assets/landscape/wozanguodeshipin_10.png" alt="">
				<span>12万次播放</span>
				<span class="time">0:15</span>
			</div>
			<p>
				哈哈哈哈，水居然可以这么清澈！！！
			</p>
			<div class="user">
				<img class="icon" src="../../assets/personIcon/wozanguodeshipin_01.png" alt="">
				<span>黄小呱</span>
				<img class="share" src="../../assets/smallIcon/share.png" alt="">
				<img class="info" src="../../assets/smallIcon/infromation.png" alt="">
				<img class="zan" src="../../assets/smallIcon/Fabulous.png" alt="">
			</div>
		</div>
		<div class="water">
			<div class="picture">
				<img src="../../assets/landscape/wozanguodeshipin_20.png" alt="">
				<span>14万次播放</span>
				<span class="time">0:15</span>
			</div>
			<p>
				西藏的独特生物—牦牛
			</p>
			<div class="user">
				<img class="icon" src="../../assets/personIcon/wozanguodeshipin_02.png" alt="">
				<span class="miao">喵了个咪滴</span>
				<img class="share" src="../../assets/smallIcon/share.png" alt="">
				<img class="info" src="../../assets/smallIcon/infromation.png" alt="">
				<img class="zan" src="../../assets/smallIcon/Fabulous.png" alt="">
			</div>
		</div>
		<div class="flower">
			<div class="picture">
				<img src="../../assets/landscape/zhengwen_01.png" alt="">
				<img class="play" src="../../assets/smallIcon/yuan.png" alt="">
				<span>16万次播放</span>
				<span class="time">0:15</span>
			</div>
			<p>
				最好的季节看最美的花~
			</p>
			<div class="user">
				<img class="icon" src="../../assets/personIcon/lushangzhengwen_04.png" alt="">
				<span class="miao">大耳朵兔兔</span>
				<img class="share" src="../../assets/smallIcon/share.png" alt="">
				<img class="info" src="../../assets/smallIcon/infromation.png" alt="">
				<img class="zan" src="../../assets/smallIcon/Fabulous.png" alt="">
			</div>
		</div>
	</div>
</template>

<script>
import Search from '../../components/search'
export default{
	name:"praise-video",
	data(){
		return{

		}
	},
	components:{
		Search
	}
}	

</script>
<style scoped lang="less">
	.nav_box{
		width: 100%;
		height: 94 /50rem;
		background-color: #7dd19d;
		overflow: hidden;
		position: fixed;
		top:0;
		left:0;
		right:0;
		z-index: 666;
		.nav_inner{
			width:710 /50rem;
			height: 100%;
			margin-left: 24 /50rem;	
			img{
				margin-top: 28 /50rem;
				width: 22 /50rem;
				height: 40 /50rem;
				margin-right: 75 / 50rem;
				float: left;
			}
		}
	}

	.headline{
		width:100%;
		height:88 / 50rem;
		background-color: #ffffff;
		margin-top: 99 / 50rem;
		display: flex;
		text-align: center;
		line-height: 88 / 50rem;
	}
	.praise,.title,.video{
		flex:1;
	}
	.praise{
		font-size: 36 / 50rem;	
	}
	.video{
		color:#7dd19c;
	}
	.video .line{
		width:100 / 50rem;
		height:4 / 50rem;
		border-radius: 4 / 50rem;
		background-color: #5dade2;
		bottom: 10 / 50rem;
		position: relative;
		left:77 / 50rem;
	}
    
    .water{
    	background-color: #ffffff;
    	margin-top: 20 / 50rem;
    	padding-top: 20 / 50rem;
    	padding-bottom: 14 / 50rem;
    	padding-left: 20 / 50rem;
    	padding-right: 20 / 50rem;
    }
	.water .picture img{
		width:710 / 50rem;
		height:280 / 50rem;
	}
	.water .picture span{
		font-size: 18 / 50rem;
		color:#ffffff;
		position: relative;
		top:-40 / 50rem;
		left:20 / 50rem;
	}
	.water .picture .time{
		font-size: 18 / 50rem;
		color:#ffffff;
		position: relative;
		top:-40 / 50rem;
		left:470 / 50rem;
	}
	.water p{
		font-size: 26 / 50rem;
	}
	.user .icon{
		width:60 / 50rem;
		height:60 / 50rem;
		margin-top: 20 / 50rem;
	}
	.user span{
		position: relative;
		font-size: 24 / 50rem;
		margin-left: 10 / 50rem;
		top: -15 / 50rem;
		margin-right: 300 / 50rem;
	}
	.user .share{
		width:31 / 50rem;
		height:33 / 50rem;
		margin-right: 48 / 50rem;
	}
	.user .info{
		width:32 / 50rem;
		height:32 / 50rem;
		margin-right: 48 / 50rem;
	}
	.user .zan{
		width:40 / 50rem;
		height:40 / 50rem;
	}
	.user .miao{
		margin-right: 250 / 50rem;
	}
	


.flower{
    	background-color: #ffffff;
    	margin-top: 20 / 50rem;
    	padding-top: 20 / 50rem;
    	padding-bottom: 14 / 50rem;
    	padding-left: 20 / 50rem;
    	padding-right: 20 / 50rem;
    }
	.flower .picture img{
		width:710 / 50rem;
		height:280 / 50rem;
	}
	.flower .picture span{
		font-size: 18 / 50rem;
		color:#ffffff;
		position: relative;
		top:-98 / 50rem;
		left:-76 / 50rem;
	}
	.flower .picture .play{
		width:88 / 50rem;
		height:88 / 50rem;
		position: relative;
		top: -186 / 50rem;
		left:325 / 50rem;
	}
	.flower .picture .time{
		font-size: 18 / 50rem;
		color:#ffffff;
		position: relative;
		top:-98 / 50rem;
		left:370 / 50rem;
	}
	.flower p{
		font-size: 26 / 50rem;
		margin-top: -59 / 50rem;
	}

</style>